<!--
 * @Author       : Hejh(3010733382@qq.com)
 * @Version      : V1.0
 * @Date         : 2024-02-09 10:51:19
 * @Description  : 上传与下载设置
-->

<template>
  <div class="upload-settings">
    <n-form
      ref="formRef"
      :label-width="200"
      :label-placement="menuShow ? 'left' : 'top'"
      label-align="left"
      :model="settings"
      size="small"
      :rules="rules"
      require-mark-placement="left"
    >
      <n-form-item label="上传分片大小：" path="chunkSize">
        <n-input-number
          :value="+convertBytes(settings.chunkSize, 'MB')"
          @update:value="
            (value: number) => handleByteChange('chunkSize', value, 'MB')
          "
          clearable
          placeholder="请输入上传分片大小："
        >
          <template #suffix> MB</template>
        </n-input-number>
        <div class="ml-[12px] text-gray-400 text-[12px]">
          分片大小是断点续传和分片上传的基础
        </div>
      </n-form-item>
      <n-form-item label="上传并发线程：" path="uploadThreadNum">
        <n-input
          class="!w-[300px]"
          :value="settings.uploadThreadNum"
          @update:value="
            (value: string) => handleChange('uploadThreadNum', value)
          "
          :allow-input="onlyAllowNumber"
          placeholder="请输入上传并发线程"
          clearable
          :maxlength="6"
        />

        <div class="ml-[12px] text-gray-400 text-[12px]">
          推荐=10;文件或分片同时上传数
        </div>
      </n-form-item>
      <n-form-item label="上传失败自动重传次数：" path="requestRetryNum">
        <n-input
          class="!w-[300px]"
          :value="settings.requestRetryNum"
          @update:value="
            (value: string) => handleChange('requestRetryNum', value)
          "
          placeholder="请输入上传失败自动重传次数"
          :allow-input="onlyAllowNumber"
          clearable
          :maxlength="6"
        />
        <div class="ml-[12px] text-gray-400 text-[12px]">
          推荐=5;分片上传失败自动进行重传次数,0代表不自动重传
        </div>
      </n-form-item>
      <n-form-item label="上传忽略文件：" path="uploadIngoreSources">
        <n-input
          class="!w-[300px]"
          :value="settings.uploadIngoreSources"
          @update:value="
            (value: string) => handleChange('uploadIngoreSources', value)
          "
          :allow-input="noSideSpace"
          placeholder="请输入上传忽略文件"
          clearable
        />
        <div class="ml-[12px] text-gray-400 text-[12px]">
          上传自动忽略的文件名,可以排除临时文件,多个用逗号隔开,例如:
          .DS_store,thumb.db
        </div>
      </n-form-item>
      <n-divider class="!my-2" />
    </n-form>
  </div>
</template>

<script setup lang="ts">
import type { FormInst } from 'naive-ui'
import type { IndexObj } from '@/types/commom'
import { convertBytes, noSideSpace, onlyAllowNumber } from '@/utils/index'
import { handleNumberChange } from '@/utils/commonBusiness'

defineProps<{
  settings: IndexObj
  menuShow: boolean
}>()

const emits = defineEmits<{
  (e: 'changeSettings', key: string, value: string): void
}>()

const formRef = ref<FormInst | null>(null)
const rules = ref({
  chunkSize: [
    {
      required: true,
      message: '请输入上传分片大小',
      trigger: ['blur']
    }
  ],
  uploadThreadNum: [
    {
      required: true,
      message: '请输入上传线程数量',
      trigger: ['blur']
    },
    {
      validator(rule: any, value: string) {
        const num = +value
        return num >= 1 && num <= 2048
      },
      message: '上传线程数量有误',
      trigger: ['blur']
    }
  ],
  requestRetryNum: [
    {
      required: true,
      message: '请输入上传失败自动重传次数',
      trigger: ['blur']
    },
    {
      validator(rule: any, value: string) {
        const num = +value
        return num >= 1 && num <= 20
      },
      message: '上传失败自动重传次数有误',
      trigger: ['blur']
    }
  ]
})

const handleChange = (key: string, value: string) => {
  emits('changeSettings', key, value)
}

const handleByteChange = (key: string, value: any, unit: string) => {
  const res = handleNumberChange(value, unit)
  if (!res) {
    return
  }
  emits('changeSettings', key, res)
}

defineExpose({
  formRef
})
</script>

<style scoped lang="scss"></style>
